<!-- <template>
 <div class="module-page">
   <div class="module-page-left">
    <div class="module-page-left-top">
      <div v-for="(item,index) in moudleList" :key="index" class="module-page-left-top-item" :class="`marginLeft${index}`">
      <img class="module-page-left-top-img" :src="item.url" alt="" srcset="">
      <div class="module-page-left-top-item-lable">{{item.lable}}</div>
      </div>
    </div>
    <div class="module-page-left-bottom">操作</div>
   </div>
    
 </div>
 
  
</template> -->
 
<template>
 <div class="module-page">
   <div class="module-page-left">
    <div class="module-page-left-top">
      <div v-for="(item,index) in moudleList" :key="index" class="module-page-left-top-item" :class="`marginLeft${index}`">
      <img class="module-page-left-top-img" :src="item.url" alt="" srcset="">
      <div class="module-page-left-top-item-lable">{{item.lable}}</div>
      </div>
    </div>
    <div class="module-page-left-bottom">操作</div>
   </div>   
 </div>
 <div class="drawer-more">
  <moduleDrawer/>
 <div>  
</div> 
</div> 
  
</template>
<script setup lang='ts'>
import { ref  } from 'vue'
  import moduleDrawer from '@/components/modelPage/moduleDrawer.vue';
   
   
import m1 from "../../assets/img/m1.png" 
import m2 from "../../assets/img/m2.png" 
import m3 from "../../assets/img/m3.png" 
import m4 from "../../assets/img/m4.png" 
import m5 from "../../assets/img/m5.png"
 
const moudleList = ref([
  {lable:"添加标签",id:0,url:m1},
  {lable:"第一人称",id:1,url:m2},
  {lable:"飞行",id:2,url:m3},
  {lable:"巡检",id:3,url:m4},
  {lable:"自定义视点",id:4,url:m5}, 
]) 
 
  
</script>
<style scoped lang="scss"> 
@import url("./css/modelPageMY.scss");
</style>